<template>
	<view class="container">
		<view class="detail-header">
			<view class="">
				<view class="detail-header-title">
					{{detail.patient_name}}
				</view>
				<view class="detail-header-card">
					{{detail.patient_id_number}}
				</view>
			</view>
			<view class="detail-header-icon">
				<image :src="imgUrl('/uploads/20250723/f118c19e16fdb0cb2e4bc265e8bad343.png')" mode="widthFix" />
			</view>
		</view>
		<view class="contant">
			<view class="contant-item contant-flex">
				<view class="contant-label">
					就诊人症状描述:
				</view>
				<view class="contant-text">{{detail.chief_complaint?detail.chief_complaint:"&nbsp;&nbsp;- -"}}</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					发病时间:
				</view>
				<view class="contant-text">{{detail.onset_time?detail.onset_time:"&nbsp;&nbsp;- -"}}</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					就诊历史:
				</view>
				<view class="history-item">
					<view class="history-image" v-for="(item) in detail.medical_history" :key="item">
						<image @click="imgPreview(imgUrl(item))" :src="imgUrl(item)" mode="aspectFill" />
					</view>
				</view>
			</view>
			<view class="contant-item">
				<view class="contant-label">
					是否指定医院:
				</view>
				<view class="radio-box">
					<view class="radio-item" :class="item.name==detail.is_designated_hospital?'radio-active':''"
						v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="contant-item">
				<view class="contant-label">
					是否指定医生:
				</view>
				<view class="radio-box">
					<view class="radio-item" :class="item.name==detail.is_designated_doctor?'radio-active':''"
						v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
				</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					意向医院:
				</view>
				<view class="contant-text">{{detail.intended_hospital?detail.intended_hospital:"&nbsp;&nbsp;- -"}}
				</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					意向科室:
				</view>
				<view class="contant-text">{{detail.intended_department?detail.intended_department:"&nbsp;&nbsp;- -"}}
				</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					意向医生:
				</view>
				<view class="contant-text">{{detail.intended_doctor?detail.intended_doctor:"&nbsp;&nbsp;- -"}}</view>
			</view>
			<view class="contant-item contant-flex">
				<view class="contant-label">
					意向日期:
				</view>
				<view class="contant-text">{{detail.intended_date?detail.intended_date:"&nbsp;&nbsp;- -"}}</view>
			</view>
			<view class="contant-item">
				<view class="contant-label">
					是否安排出行服务:
				</view>
				<view class="radio-box">
					<view class="radio-item" :class="item.name==detail.is_travel_service_arranged?'radio-active':''"
						v-for="(item, index) in firstVisitActions" :key="index">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="price-contant">
			<view class="price-title" style="margin-bottom: 20rpx;">
				价格明细
			</view>
			<view class="flex" style="margin-bottom: 60rpx;">
				<view class="price-label">
					商品总价
				</view>
				<view class="price-number price-label">
					¥{{detail.actual_settlement_price}}
				</view>
			</view>
			<view class="flex">
				<view class="price-total-label price-title">
					合计:
				</view>
				<view class="price-total-number price-title">
					¥{{detail.actual_settlement_price}}
				</view>
			</view>
		</view>
		<view class="bottom-button">
			<!-- 1-未支付，2-已支付，3-支付失败，默认未支付 4-已退款 -->
			<view class="button-item" @click="payment()" v-if="detail.application_status==2&&detail.payment_status!=2">
				{{payLoading?"处理中...":'去支付¥'+detail.actual_settlement_price}}
			</view>
			<view class="button-item" @click="refund()"
				v-if="(detail.application_status==2||detail.application_status==4)&&detail.payment_status==2">
				{{refundLoading?"处理中...":'退款'}}
			</view>
			<!-- 已预约才显示 -->
			<view class="button-item" style="background:#F54730" @click="cancel()" v-if="detail.application_status==4">
				{{editLoading?"处理中...":"取消预约"}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		imgUrl,
		miniPay
	} from '../../utils/global';
	import moment from "moment"
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app';
	import {
		getapplicationinfo,
		editgetapplication,
		medicalservicesrefund,
		medicalservicesPay
	} from '@/api/medical';
	import {
		useUserStore
	} from '@/store/user';
	const userStore = useUserStore();
	import {
		ref
	} from "vue";
	const infoId = ref("")
	// 是否首诊\是否急诊
	const firstVisitActions = ref([{
			name: "是",
			value: true
		},
		{
			name: "否",
			value: false
		},
	])
	const detail = ref({})
	onLoad((options) => {
		infoId.value = options.id
		getInfo(options.id)
	})
	//多张图片，可以左右滑动
	const imgPreview = (url) => {
		let arr = []
		detail.value.medical_history.forEach((item, index) => {
			if (item) {
				arr.push(imgUrl(item))
			}
		})
		let index = arr.findIndex(value => value == url)
		uni.previewImage({
			current: index,
			urls: arr,
		});
	}
	const editLoading = ref(false)
	const payLoading = ref(false)
	const refundLoading = ref(false)
	const refund = () => {
		if (refundLoading.value) return
		uni.showModal({
			title: '退款',
			content: '你确定要退款吗?',
			cancelText: '返回',
			confirmText: '确认',
			success: async (res) => {
				if (res.confirm) {
					refundLoading.value = true
					medicalservicesrefund({
						id: detail.value.id,
						actual_settlement_price: detail.value.actual_settlement_price,
					}).then(result => {
						console.log(result, "asdasdasd")
						uni.showToast({
							title: "处理成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/medical/list"
							})
							refundLoading.value = false
						}, 1000)
					}).catch(err => {
						refundLoading.value = false
					})
				}
			},
		});
	}
	// 支付
	const payment = () => {
		if (payLoading.value) return
		payLoading.value = true
		medicalservicesPay({
			actual_settlement_price: detail.value.actual_settlement_price,
			uid: userStore.userInfo.id,
			id: detail.value.id,
		}).then(pay_res => {
			miniPay(pay_res).then(result => {
				uni.showToast({
					title: '支付成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/medical/list'
					});
					payLoading.value = false
				}, 1000);
			}).catch(err => {
				payLoading.value = false
			})
		}).catch(err => {
			payLoading.value = false
		})
	}
	// 取消预约
	const cancel = () => {
		if (editLoading.value) return
		uni.showModal({
			title: '取消预约',
			content: '你确定要取消本次预约吗?',
			cancelText: '返回',
			confirmText: '确认',
			success: async (res) => {
				if (res.confirm) {
					editLoading.value = true
					editgetapplication({
						id: detail.value.id
					}).then(result => {
						console.log(result, "asdasdasd")
						uni.showToast({
							title: "取消成功",
							icon: "none"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: "/pages/medical/list"
							})
							editLoading.value = false
						}, 1000)
					}).catch(err => {
						editLoading.value = false
					})
				}
			},
		});
	}
	// 获取详情
	const getInfo = (id) => {
		getapplicationinfo({
			id:infoId.value
		}).then(res => {
			if (res.is_designated_hospital) {
				res.is_designated_hospital = "是"
			} else {
				res.is_designated_hospital = "否"
			}
			if (res.is_travel_service_arranged) {
				res.is_travel_service_arranged = "是"
			} else {
				res.is_travel_service_arranged = "否"
			}
			if (res.is_designated_doctor) {
				res.is_designated_doctor = "是"
			} else {
				res.is_designated_doctor = "否"
			}
			if (res.medical_history) {
				res.medical_history = res.medical_history.split(",")
			}
			detail.value = res
			console.log(detail.value)
		})
	}
</script>

<style scoped>
	.container {
		background: #F8F8FA;
		padding: 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 250rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 250rpx);
		min-height: 100vh;
		box-sizing: border-box;
	}

	.detail-header {
		padding: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: linear-gradient(225deg, #FFFBF9 0%, #FFFFFF 100%);
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.detail-header-title {
		color: #FF7F36;
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}

	.detail-header-card {
		color: #B6B6B8;
		font-size: 26rpx;
	}

	.detail-header-icon {
		width: 33rpx;
	}

	.detail-header-icon>image {
		width: 100%
	}

	.contant {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;
	}

	.history-item {
		/* 	display: flex;
		flex-wrap: wrap; */
		margin-left: 10rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 20rpx 20rpx;
	}

	.history-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 6rpx;
	}

	.history-image>image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
		/* box-shadow: 0rpx 3rpx 12rpx 1rpx rgba(0, 0, 0, 0.1); */
	}

	.contant-flex {
		display: flex;
	}

	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.contant-item {
		padding: 30rpx 0;
		color: #333333;
		font-size: 30rpx;
		position: relative;
		border-bottom-width: 0.5px !important;
		border-color: #33333306 !important;
		border-bottom-style: solid;
	}

	.contant-item:last-child {
		border: none;
	}

	.contant-label {
		color: #333333;
		font-size: 30rpx;
		white-space: nowrap;
	}

	.radio-box {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}

	.radio-item {
		padding: 14rpx 40rpx;
		background: #F8F8F8;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #333333;
		margin-right: 30rpx;
	}

	.radio-active {
		background: #FFF0E8;
		color: #FF7F36 !important;
	}

	.price-title {
		color: #333;
		font-size: 30rpx;
		font-weight: 500;
	}

	.price-contant {
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-bottom: 30rpx;
	}

	.price-label {
		font-size: 26rpx;
	}

	.button-item {
		height: 80rpx;
		line-height: 80rpx;
		background: #FF7F36;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		margin-bottom: 30rpx;
		border-radius: 51rpx;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
	}

	.contant-text {
		word-break: break-all;
	}

	.bottom-button {
		position: fixed;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 30rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		bottom: 0;
		left: 0rpx;
		right: 0rpx;
		background: #F8F8FA;
	}
</style>